import styles from "./index.module.less";
import { Card, Title } from "@/pages/insure/components/index.js";
import { ArticlePopup } from "@/components/article-popup/index.jsx";
import { useRef } from "react";
import { guaranteeDetail } from "@/contstants.js";

export const SafeguardLiability = () => {
  const articlePopupRef = useRef(null);
  return (
    <Card>
      <Title
        extra={
          <>
            查看
            <span onClick={() => articlePopupRef.current.open()}>保障详情</span>
          </>
        }
      >
        保障责任
      </Title>
      <div className={styles.list}>
        <div className={"item"}>
          <div className={"label"}>社保内一般医疗保险金</div>
          <div className={"value"}>300万元</div>
        </div>
        <div className={"item"}>
          <div className={"label"}>社保内重大疾病医疗保险金</div>
          <div className={"value"}>600万元</div>
        </div>
      </div>
      <ArticlePopup ref={articlePopupRef} article={guaranteeDetail} />
    </Card>
  );
};
